<template>
  <view class="page">
    <nav-bar>
      <template #title>
        {{ "系统管理" }}
      </template>
    </nav-bar>
    <view class="container">
      <avue-tree
        :data="data"
        labelField="label"
        valueField="value"
        :defaultExpandedKeys="defaultExpandedKeys"
        :showCheckbox="true"
        @change="handleTreeChange"
      >
      </avue-tree>
    </view>
  </view>
</template>
<script setup lang="ts">
import AvueTree from "@/components/AvueTree";
const defaultExpandedKeys = ref(["1-1", "1-2"]);
const data = ref([
  {
    value: "1",
    label: "菜单",
    children: [
      {
        value: "1-1",
        label: "系统管理",
        children: [
          {
            value: "1-1-1",
            label: "用户管理",
          },
          {
            value: "1-1-2",
            label: "角色管理",
          },
          {
            value: "1-1-3",
            label: "部门管理",
          },
          {
            value: "1-1-4",
            label: "租户管理",
          },
          {
            value: "1-1-5",
            label: "菜单管理",
          },
          {
            value: "1-1-6",
            label: "系统日志",
          },
        ],
      },
      {
        value: "1-2",
        label: "智慧园区",
        children: [
          {
            value: "1-2-1",
            label: "园区管理",
          },
          {
            value: "1-2-2",
            label: "入住管理",
          },
          {
            value: "1-2-3",
            label: "设备管理",
          },
          {
            value: "1-2-4",
            label: "资产管理",
          },
        ],
      },
    ],
  },
]);
function handleTreeChange(data: any) {
  console.log(data, "handleTreeChange");
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 46px);
  padding: 10px;
}
</style>
